<template>
  <div id="login">
    <!-- <img alt="bg logo" src="../../assets/bg.jpg" /> -->
    <div class="wrapLogin"></div>

    <!-- <span @click="login()">登入</span> -->
    <div class="from-Box">
      <div class="wrapback">
        <div class="titleBlock">
          <div class="loginTitle">欢迎登录</div>
          <!-- <img src="../../assets/image/user.png" alt=""> -->
        </div>
        <div class="tab-Box">
          <div
            :class="{ active: tab === 0 ? 'active' : '' }"
            @click="tabClick(0)"
          >
            账号密码登录
          </div>
          <div
            :class="{ active: tab === 1 ? 'active' : '' }"
            @click="tabClick(1)"
          >
            手机验证登录
          </div>
        </div>
        <div v-show="from_admin">
          <a-form class="user-layout-login" :form="form">
            <a-form-item>
              <a-icon slot="prefix" type="user" />
              <a-input
                class="radiu"
                size="large"
                type="text"
                placeholder="请输入用户名"
                @change="userChange"
                v-decorator="[
                  'username',
                  {
                    rules: [{ required: true, message: '请输入用户名' }],
                    validateTrigger: 'blur',
                  },
                ]"
              >
                <a-icon
                  slot="prefix"
                  type="user"
                  style="color: rgba(0, 0, 0, 0.25)"
                />
              </a-input>
            </a-form-item>

            <a-form-item>
              <a-input-password
                class="radiu"
                size="large"
                type="password"
                autocomplete="false"
                placeholder="请输入密码"
                @change="upwdChange"
                v-decorator="[
                  'password',
                  {
                    rules: [{ required: true, message: '请输入密码' }],
                    validateTrigger: 'blur',
                  },
                ]"
                @keyup.enter="loginVal"
              >
                <a-icon
                  slot="prefix"
                  type="lock"
                  style="color: rgba(0, 0, 0, 0.25)"
                />
              </a-input-password>
            </a-form-item>
            <div class="yza-Box-Box">
              <a-form-item>
                <a-input
                  class="yzm-Box"
                  size="large"
                  type="text"
                  autocomplete="false"
                  placeholder="请输入图形验证码"
                  @change="codeChange"
                  v-decorator="[
                    'code',
                    {
                      rules: [{ required: true, message: '请输入图形验证码' }],
                      validateTrigger: 'blur',
                    },
                  ]"
                  @keyup.enter="loginVal"
                >
                  <a-icon
                    slot="prefix"
                    type="safety"
                    style="color: rgba(0, 0, 0, 0.25)"
                  />
                </a-input>
              </a-form-item>
              <img
                class="yzm-img"
                :src="codeList"
                alt=""
                @click="getCodeList"
              />
            </div>

            <!-- <a-form-item style="margin-top:24px"> -->
            <a-button
              size="large"
              type="primary"
              class="login-button"
              :loading="loginLoading"
              @click="loginVal"
              >登录</a-button
            >
            <!-- </a-form-item> -->
          </a-form>

          <div class="text-flex-Box">
            <a-checkbox @change="onChange"> 记住密码 </a-checkbox>
            <div>忘记密码？</div>
          </div>
        </div>
        <div v-show="from_phone">
          <a-form class="user-layout-login yza-input-Box" :form="form">
            <a-form-item>
              <a-input
                class="radiu"
                size="large"
                type="text"
                placeholder="请输入手机号"
                @change="userChange_phone"
                v-decorator="[
                  'username',
                  { rules: [{ required: true, message: '请输入手机号' }] },
                ]"
              >
                <a-icon
                  slot="prefix"
                  type="user"
                  style="color: rgba(0, 0, 0, 0.25)"
                />
              </a-input>
              <div v-show="show" class="yzm-text" @click="getCode">
                获取验证码
              </div>
              <div v-show="!show" class="yzm-text">{{ count }}秒后重新获取</div>
              <!-- <div class="yzm-text">获取验证码</div> -->
            </a-form-item>

            <a-form-item>
              <a-input-password
                class="radiu"
                size="large"
                type="password"
                autocomplete="false"
                placeholder="请输入验证码"
                @change="msgCodeChage"
                v-decorator="[
                  'password',
                  {
                    rules: [{ required: true, message: '请输入验证码' }],
                    validateTrigger: 'blur',
                  },
                ]"
                @keyup.enter="loginVal"
              >
                <a-icon
                  slot="prefix"
                  type="lock"
                  style="color: rgba(0, 0, 0, 0.25)"
                />
              </a-input-password>
            </a-form-item>

            <!-- <a-form-item style="margin-top:24px"> -->
            <a-button
              size="large"
              type="primary"
              class="login-button"
              :loading="loginLoading"
              @click="loginPhoneNumber"
              >登录</a-button
            >
            <!-- </a-form-item> -->
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as API from "../../api/login";

export default {
  name: "login",
  data() {
    return {
      show: true,
      count: "",
      timer: null,
      from_admin: true,
      from_phone: false,
      tab: 0,
      form: this.$form.createForm(this),
      codeList: "",
      postBody: {
        password: "",
        username: "",
        uuid: "",
        code: "",
      },
      loginLoading: false,
    };
  },
  created() {
    this.getCodeList();
  },
  methods: {
    onChange(e) {
      console.log(`checked = ${e.target.checked}`);
    },
    //短信验证码登录
    loginPhoneNumber() {
      this.loginLoading = true;
      this.form.validateFields((err) => {
        if (!err) {
          this.loginAction_yzm();
        } else {
          this.loginLoading = false;
          this.$message.warning("必填项未填写");
        }
      });
    },
    loginAction_yzm() {
      let params = {
        // phoneNumber: this.postBody.phoneNumber,
        // msgCode:this.postBody.msgCode,
      };
      API.phoneNumber(params).then((res) => {
        if (res.code === 200) {
        } else {
        }
      });
    },
    //获取短信验证码
    getCode() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
      let params = {
        phoneNumber: this.postBody.phoneNumber,
      };
      API.getMsgCode(params).then((res) => {
        if (res.code === 200) {
        } else {
        }
      });
    },
    tabClick(num) {
      if (num === 0) {
        this.tab = 0;
        this.from_admin = true;
        this.from_phone = false;
      } else {
        this.tab = 1;
        this.from_admin = false;
        this.from_phone = true;
      }
      console.log(num);
    },
    // 获取图形验证码
    getCodeList() {
      API.getCode()
        .then((res) => {
          // debugger
          if (res.code === 200) {
            this.codeList = res.data.img;
            this.postBody.uuid = res.data.uuid;
          } else {
            this.loginLoading = false;
          }
        })
        .catch(() => {
          this.loginLoading = false;
        });
    },
    loginVal() {
      // this.$store.dispatch("updateSup", []).then(() => {
      //         // let path = merchantRespParams ? "/center" : "/setting"
      //         setTimeout(() => {
      //           this.$router.push({
      //             // path: 'home'
      //             path: 'article'
      //           });
      //         }, 0);
      //       });
      this.loginLoading = true;
      this.form.validateFields((err) => {
        if (!err) {
          this.loginAction();
        } else {
          this.loginLoading = false;
          this.$message.warning("必填项未填写");
        }
      });
    },
    loginAction() {
      API.login(this.postBody)
        .then((res) => {
          // debugger
          if (res.code === 200) {
            this.$store.dispatch("updateToken", res.data.token).then(() => {
              // this.getInfoList();
              this.$store.dispatch("updateUserInfo", res.data.user).then(() => {
                this.getMenusList();
              });
            });
          } else {
            this.loginLoading = false;
            this.getCodeList();
          }
        })
        .catch(() => {
          this.getCodeList();
          this.loginLoading = false;
        });
    },
    // getInfoList() {
    //   // 获取用户基本信息
    //   API.getInfo()
    //     .then(res => {
    //       if (res.code === 200) {
    //         this.$store.dispatch("updateUserInfo", res.data).then(() => {
    //           this.getMenusList();
    //         });
    //       } else {
    //         this.loginLoading = false;
    //       }
    //     })
    //     .catch(() => {
    //       this.loginLoading = false;
    //     });
    // },
    getMenusList() {
      let that = this
      // 获取菜单信息
      API.getMenus()
        .then((res) => {
          if (res.code === 200) {
            this.$store.dispatch("updateSup", res.data).then(async () => {
              // let path = merchantRespParams ? "/center" : "/setting"
              // console.log(11111111)
              setTimeout(() => {
                // console.log(2222222)
                that.$router.push({
                  path: "/home"
                });
              }, 0);
            });
          }
          this.loginLoading = false;
        })
        .catch(() => {
          this.loginLoading = false;
        });
    },
    msgCodeChage(e) {
      console.log(e.target.value);
      this.postBody.msgCode = e.target.value;
    },
    userChange(e) {
      this.postBody.username = e.target.value;
    },
    userChange_phone(e) {
      console.log(e.target.value);
      this.postBody.phoneNumber = e.target.value;
    },
    upwdChange(e) {
      this.postBody.password = e.target.value;
    },
    codeChange(e) {
      this.postBody.code = e.target.value;
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
#login {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .wrapLogin {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background-image: image-set(
    //   url("../../assets/image/login.png") 1x,
    //   url("../../assets/image/login_2x.png") 2x
    // );
    background: url("../../assets/image/login_3x.png") no-repeat center center;
    background-size: cover;
    // filter: blur(3px);
  }
  .wrapback {
    // box-shadow: 0px 0 10px 6px rgba(255,255,255, .6);
    // margin-top: 20%;
    // transform: translateY(-50%);
    // outline: 0;
    // border-radius: 25px;
    // padding:40px 0;
    // width: 300px;
    // height: 300px;
    .user-layout-login {
      width: 100%;
      padding: 0 60px;
      // .radiu {
      //   cursor: pointer;
      //   // text-indent: -5px;
      //   /deep/ input::-webkit-input-placeholder {
      //     color: #fff;
      //     text-overflow: ellipsis;
      //   }
      //   /deep/ input:-moz-placeholder {
      //     color: #fff;
      //     text-overflow: ellipsis;
      //   }
      //   /deep/ input::-moz-placeholder {
      //     color: #fff;
      //     text-overflow: ellipsis;
      //   }
      //   /deep/ input:-ms-input-placeholder {
      //     color: #fff;
      //     text-overflow: ellipsis;
      //   }
      //   /deep/ input {
      //     // overflow: auto;
      //     text-indent: 10px;
      //     background-color: transparent;
      //     // color: #fff;
      //     border-radius: 25px;
      //   }
      // }
    }
    .titleBlock {
      padding: 30px 10px 20px 16px;
      text-align: center;
      line-height: 1;
      img {
        width: 100px;
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        margin-bottom: 20px;
        // box-shadow: 6px 0 10px 6px #fff;
      }
    }
    .login-button {
      width: 100%;
      height: 44px;
      background-color: #8a2cff;
      border: none;
      // border-radius: 150px;
      font-size: 18px;
    }
  }
}
.loginTitle {
  font-size: 30px;
  z-index: 9999999;
  color: #8a2cff;
  // position: absolute;
  // top: -1000px;
  // font-family: 'SunXiaoSongXiaFenTi';
  // -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;
}
.login {
  position: relative;
}
.from-Box {
  z-index: 99999;
  // position: fixed;
  position: absolute;
  // left: 160px;
  left: 15%;
  // botto
  // z-index: 999999;
  // background-color:pink;
  // bottom: 107px;
}
.tab-Box {
  position: relative;
  cursor: pointer;
  display: flex;
  // background-color: pink;
  margin: 20px 0;
}
.tab-Box div {
  margin-left: 60px;
  height: 30px;
}
.active {
  font-weight: bold;
  border-bottom: 1px solid #5927fa;
}
.yzm-Box {
  width: 120px;
}
.yza-Box-Box {
  position: relative;
}
.yzm-img {
  top: 0;
  right: 0;
  z-index: 99999;
  position: absolute;
}
.yza-input-Box {
  position: relative;
}

.yzm-text {
  cursor: pointer;
  font-size: 10px;
  position: absolute;
  z-index: 999999;
  right: 0;
  top: -12px;
  right: 10px;
  color: #b4b4b4;
}
.text-flex-Box {
  display: flex;
  justify-content: space-between;
  width: 256px;
  margin: 10px auto;
}
.text-flex-Box > div:nth-child(2) {
  color: #8a2cff;
}
.ant-checkbox-checked .ant-checkbox-inner {
  background-color: #3b3b3b !important;
}
</style>
